<template>
  <div class="memberside">
    <div class="membernum flex-start">
      <span
        class="nav cp"
        @click="memberState = 1"
        :class="memberState === 1 ? 'active' : ''"
      >会议中（{{ cf_members.length }}）</span
      >
      <span
        class="nav cp"
        @click="memberState = 0"
        :class="memberState === 0 ? 'active' : ''"
      >未入会（{{ cf_invited.length }}）</span
      >
    </div>
    <div class="membcontent">
      <div class="search">
        <img src="@/assets/cfRoom/images/search.png" alt=""/>
        <input
          v-model.trim="member"
          placeholder="请输入成员姓名"
          @input="searchMember"
        />
      </div>
      <div class="memberbox">
        <ul>
          <li class="member" v-for="item in memberState === 1 ? cf_members : cf_invited" :key="item.id">
            <div class="avatar">
              <avatar :id="item.id" :imgID="userList[item.id].user_img_id" :showuserinfo="'&' + item.id"></avatar>
              <img
                class="host"
                v-if="tools.conference.isHost(item.id)"
                src="@/assets/cfRoom/images/compere.png"
                alt=""
              />
            </div>
            <div class="desc flex-between">
              <div class="name">
                <p>
                  <span class="userName" :title="userList[item.id].user_name">{{
                      userList[item.id].user_name
                    }}</span>
                </p>
                <div v-if="memberState === 1">
                  <span
                    v-if="item.id === cf_sponsor && tools.conference.isHost(item.id)"
                    class="undername"
                  >（发起人{{ tools.isSelf(item.id) ? "，我" : "" }}）</span
                  >
                  <span
                    v-else-if="item.id !== cf_sponsor && tools.conference.isHost(item.id)"
                    class="undername"
                  >（主持人{{ tools.isSelf(item.id) ? "，我" : "" }}）</span
                  >
                  <span
                    v-else-if="item.id === cf_sponsor && !tools.conference.isHost(item.id)"
                    class="undername"
                  >（发起人{{ tools.isSelf(item.id) ? "，我" : "" }}）</span
                  >
                  <span v-else class="undername"
                  >（参会人{{ tools.isSelf(item.id) ? "，我" : "" }}）</span
                  >
                </div>
              </div>
              <div :class="memberState === 1 ? 'operation' : 'invitedOperation'">
                <div v-if="memberState === 1">
                  <img
                    v-if="item.voiced"
                    class="onaudio"
                    src="@/assets/cfRoom/images/onAudioGrey.png"
                    alt=""
                  />
                  <img
                    v-else
                    class="onaudio"
                    src="@/assets/cfRoom/images/offAudioGrey.png"
                    alt=""
                  />
                  <img
                    v-if="item.camera"
                    class="onvideo"
                    src="@/assets/cfRoom/images/onVideoGrey.png"
                    alt=""
                  />
                  <img
                    v-else
                    class="onvideo"
                    src="@/assets/cfRoom/images/offVideoGrey.png"
                    alt=""
                  />
                </div>
                <img
                  class="etc"
                  @click.stop="showOperation(item.id)"
                  src="@/assets/cfRoom/images/etc.png"
                  alt=""
                />
              </div>
<!--               查看邀请人员信息-->
              <ul class="operabox" v-if="memberState === 0 && showMemberOperation && item.id === currentOperaId">
<!--                <li @click="viewDesc">查看详情</li>-->
              </ul>
              <div v-else>
                <!-- 主持人操作 -->
                <ul v-if="tools.conference.isHost(userInfo.user_id) && showMemberOperation && item.id === currentOperaId" class="operabox"
                >
                  <li v-if="!item.voiced" @click="openAudio(item.id)">取消静音</li>
                  <li v-if="item.voiced" @click="closeAudio(item.id)">静音</li>
<!--                  <li @click="viewDesc">查看详情</li>-->
                  <li v-if="!tools.isSelf(item.id)" @click="changeHost(item.id)">设为主持人</li>
                  <li class="remove" v-if="!tools.isSelf(item.id)" @click="removeUser(item.id)">移除</li>
                </ul>
                <!-- 发起人操作(非主持人) -->
                <ul v-if="cf_sponsor === userInfo.user_id && !tools.conference.isHost(userInfo.user_id) && showMemberOperation && item.id === currentOperaId" class="operabox">
                  <li v-if="!item.voiced && tools.isSelf(item.id)" @click="openAudio(item.id)">取消静音</li>
                  <li v-if="item.voiced && tools.isSelf(item.id)" @click="closeAudio(item.id)">静音</li>
                  <li v-if="tools.conference.isHost(item.id)" @click="withdrawHost">收回主持人</li>
<!--                  <li @click="viewDesc">查看详情</li>-->
                </ul>
                <!-- 群成员操作 -->
                <ul v-if="!tools.conference.isHost(userInfo.user_id) && cf_sponsor !== userInfo.user_id && showMemberOperation && item.id === currentOperaId" class="operabox">
                  <li v-if="!item.voiced && tools.isSelf(item.id)" @click="openAudio(item.id)">取消静音</li>
                  <li v-if="item.voiced && tools.isSelf(item.id)" @click="closeAudio(item.id)">静音</li>
<!--                  <li @click="viewDesc">查看详情</li>-->
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="tools.conference.isHost(userInfo.user_id)" class="mutedbtnbox flex-between">
      <div
        :class="[
          'mutedbtn',
          'flex-center',
          cf_mute_all ? 'currentbtn' : ''
        ]"
        @click="allMuted"
      >
        全体静音
      </div>
      <div class="mutedbtn flex-center" @click="cancelMuted">解除全体静音</div>
    </div>
    <user-desc-dialog
      v-if="showUserDesc"
      :userId="currentOperaId"
      @closeMidDialog="closeDescDialog"
    ></user-desc-dialog>
    <changeHost ref="changeHost" :newHostID="currentOperaId"></changeHost>
    <allMute ref="allMute"></allMute>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import userDescDialog from '../roomDialog/userDescDialog'
import changeHost from '../roomDialog/changeHost'
import allMute from '../roomDialog/allMute'
import { sendSock } from '@/utils/socketSend'

export default {
  data () {
    return {
      memberState: 1, // 成员列表导航  1:会议中  0:未入会
      showUserDesc: false,
      showMemberOperation: false, // 展示成员更多操作
      currentOperaId: -1, // 被打开操作框用户的id
      member: '' // 搜索框查询内容
    }
  },
  computed: {
    ...mapState('conferenceRoom', ['cf_id', 'cf_sponsor', 'cf_host', 'conferenceSettings', 'cf_mute_all']),
    // 当前用户信息
    userInfo () {
      return this.$store.state.user.userInfo
    },
    // 排序好的会议成员列表
    cf_members () {
      return this.$store.getters['conferenceRoom/cf_members']
    },
    // 被邀请人员数组
    cf_invited () {
      return this.$store.state.conferenceRoom.cf_invited
    },
    // 缓存的用户信息对象
    userList () {
      return this.$store.state.chatInformation.userList
    }
  },
  methods: {
    closeDescDialog () {
      // 关闭查看详情框
      this.showUserDesc = false
    },
    viewDesc () {
      this.showUserDesc = true
    },
    // 用户操作
    showOperation (id) {
      this.showMemberOperation = !this.showMemberOperation
      if (this.showMemberOperation) {
        this.currentOperaId = id
      }
    },
    searchMember () {
      // 搜索成员
      if (!this.member) {
        this.memberList = this.onlineList.concat(this.leaveList)
        return
      }
      this.memberList = this.userList.filter(
        item => item.name.indexOf(this.member) !== -1
      )
    },
    // 成员静音
    closeAudio (id) {
      if (this.tools.isSelf(id)) {
        // 操作自己的麦克风
        sendSock({
          type: '4.1.20',
          body: {
            cf_id: this.cf_id,
            cf_operation: false
          }
        })
      } else {
        // 主持人操作其他成员
        sendSock({
          type: '4.1.15',
          body: {
            cf_id: this.cf_id,
            id
          }
        })
      }
      this.showOperation()
    },
    // 成员解除静音
    openAudio (id) {
      if (this.tools.isSelf(id)) {
        // 操作自己的麦克风
        sendSock({
          type: '4.1.20',
          body: {
            cf_id: this.cf_id,
            cf_operation: true
          }
        })
      } else {
        // 主持人操作其他成员
        sendSock({
          type: '4.1.18',
          body: {
            cf_id: this.cf_id,
            id
          }
        })
      }
      this.showOperation()
    },
    // 转让主持人
    changeHost () {
      this.$refs.changeHost.toggleShow()
      this.showOperation()
    },
    // 收回主持人
    withdrawHost () {
      sendSock({
        type: '4.1.28',
        body: {
          cf_id: this.cf_id
        }
      })
      this.showOperation()
    },
    // 移除成员
    removeUser (id) {
      sendSock({
        type: '4.1.9',
        body: {
          cf_id: this.cf_id,
          id
        }
      })
      this.showOperation()
    },
    // 全体静音
    allMuted () {
      if (!this.cf_mute_all) {
        this.$refs.allMute.toggleShow()
      }
    },
    // 解除全体静音
    cancelMuted () {
      sendSock({
        type: '4.1.13',
        body: {
          cf_id: this.cf_id
        }
      })
    }
  },
  components: {
    userDescDialog, changeHost, allMute
  }
}
</script>

<style lang="scss" scoped>
.memberside {
  position: relative;
  height: calc(100% - 208px);

  .membernum {
    position: relative;
    margin-top: 12px;
    padding-left: 12px;
    height: 32px;
    width: 100%;
    background: rgba(63, 124, 255, 0.15);
    line-height: 32px;

    span.nav {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      width: 50%;
      text-align: center;
    }

    span.nav.active {
      color: #ffffff;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        background-color: #304eec;
        transform: translateX(-50%);
        width: 32px;
        height: 2px;
      }
    }
  }

  .membcontent {
    padding: 12px 12px 0;

    .search {
      position: relative;

      img {
        width: 18px;
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
      }

      input {
        width: 100%;
        background-color: #030c1f;
        border: 1px solid rgba(63, 124, 255, 0.3);
        border-radius: 5px;
        height: 32px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        line-height: 32px;
        padding-left: 40px;
      }
    }

    .memberbox {
      margin-top: 22px;
      padding: 0 12px 12px 16px;
      width: 100%;

      &::-webkit-scrollbar {
        display: none;
      }

      overflow: auto;

      ul {
        width: 100%;

        .member {
          margin-bottom: 32px;
          display: flex;
          width: 100%;

          .avatar {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50%;

            img.host {
              width: 12px;
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
            }
          }

          .desc {
            margin-left: 10px;
            width: 246px;
            position: relative;

            .name {
              p {
                position: relative;
                line-height: 20px;
                font-size: 14px;
                color: #ffffff;
                display: flex;
                align-items: center;

                .userName {
                  display: inline-block;
                  max-width: 100px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                .online {
                  background-color: #2ebb25;
                }

                .leave {
                  background-color: #c8c8c8;
                }
              }

              .undername {
                margin-top: 3px;
                display: flex;
                align-items: center;
                height: 17px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(255, 255, 255, 0.8);
                line-height: 17px;
              }
            }

            .operation {
              display: flex;
              align-items: center;

              .onvideo {
                margin-right: 12px;
                height: 20px;
              }

              .onaudio {
                margin-right: 12px;
                height: 20px;
              }

              .etc {
                height: 20px;
                cursor: pointer;
              }
            }

            .invitedOperation {
              position: absolute;
              right: 0px;
              top: 50%;
              transform: translateY(-50%);
              .etc {
                vertical-align: middle;
                height: 20px;
                cursor: pointer;
              }
            }

            .operabox {
              position: absolute;
              right: 0;
              top: 35px;
              width: auto;
              z-index: 5;

              li {
                background-color: #fff;
                line-height: 45px;
                height: 45px;
                width: 132px;
                text-align: center;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #273553;
                cursor: pointer;

                &:hover {
                  background: linear-gradient(316deg, #4a53ef 0%, #6971fe 100%);
                  color: #fff;
                }

                &:first-child {
                  border-top-left-radius: 10px;
                  border-top-right-radius: 10px;
                }

                &:last-child {
                  border-bottom-left-radius: 10px;
                  border-bottom-right-radius: 10px;
                }
              }

              .remove {
                color: #ff2929;
              }
            }
          }
        }
      }
    }

    @media screen and (max-height: 1100px) {
      .memberbox {
        height: 592px;
      }
    }
    @media screen and (max-height: 1070px) {
      .memberbox {
        height: 480px;
      }
    }
  }

  .mutedbtnbox {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 12px;

    .mutedbtn {
      cursor: pointer;
      width: 144px;
      height: 40px;
      border-radius: 2px;
      border: 1px solid rgba(255, 255, 255, 0.6);
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
    }

    .currentbtn {
      background: linear-gradient(225deg,#4750ec 1%, #6971fe 98%);
      border: none;
    }
  }
}
</style>
